<template>
    <div class="pms_attr_group">
        <el-card class="pms_attr_group_table">
            <el-scrollbar class="scroll_category_tree">
                <CategoryTree @query="submitForm"></CategoryTree>
            </el-scrollbar>
            <div class="attr_group_table">
                <el-card class="attr_group_table_query_card">
                    <el-form :inline="true" :model="queryForm" ref="queryFormRef">
                        <el-form-item label="组名" prop="attrGroupName">
                            <el-input v-model="queryForm.name" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" :disabled="loading" @click="() => submitForm()">查询</el-button>
                            <el-button @click="resetForm(queryFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card class="attr_group_table_record_card">
                    <template #header>
                        <el-button icon="Plus" @click="handleAdd" v-has="'btn.addRole'">添加属性分组</el-button>
                    </template>
                    <el-table :data="records" style="width: 100%;" v-loading="loading" border>
                        <el-table-column type="index" label="序号" width="80" align="center" />
                        <el-table-column prop="name" label="组名" min-width="100" align="center" />
                        <el-table-column prop="description" label="描述" min-width="200" align="center" />
                        <el-table-column prop="icon" label="组图标" min-width="100" align="center" />
                        <el-table-column prop="categoryName" label="所属分类" min-width="200" align="center" />
                        <el-table-column prop="sort" label="排序" min-width="100" align="center" />
                        <el-table-column label="操作" min-width="320" align="center">
                            <template #default="{ row }">
                                <el-button icon="Edit" @click="handleEdit(row)">编辑</el-button>
                                <el-button type="danger" icon="Delete" @click="handleDelete(row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-pagination v-model:current-page="queryForm.currentPage" v-model:page-size="queryForm.pageSize"
                    :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />

                <el-dialog :title="isEdit ? '编辑属性分组' : '添加属性分组'" v-model="dialogVisible" :close-on-click-modal="false">
                    <AddOrEdit v-if="dialogVisible" :is-edit="isEdit" :id="id" @success="onSuccess">
                    </AddOrEdit>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="PmsAttrGroup">
import CategoryTree from '../components/CategoryTree.vue';
import { onMounted, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { pmsAttrGroupRequest, pmsAttrGroupType } from '@/api/mall/pmsAttrGroup/types';
import { API } from '@/api/mall/pmsAttrGroup';
import AddOrEdit from './components/AddOrEdit.vue'
import { commonPageQuery, commonRemove } from '@/api/common/CommonAPI';

// ---------- 查询 ----------
const loading = ref(false)
const queryForm = reactive<pmsAttrGroupRequest>({ currentPage: 1, pageSize: 10 })
const queryFormRef = ref<FormInstance>()
let total = ref(0)
let records = ref<pmsAttrGroupType[]>([])

onMounted(() => submitForm())

const submitForm = async (catId?: number) => {
    try {
        loading.value = true
        if (catId) {
            queryForm.categoryId = catId
        }
        const data = await commonPageQuery<pmsAttrGroupType>(API.PAGE, queryForm);
        if (data.code === 200) {
            records.value = data.data.records
            total.value = data.data.total
        }
    } finally {
        loading.value = false
    }
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const handleSizeChange = (val: number) => {
    queryForm.currentPage = 1
    queryForm.pageSize = val
    submitForm()
}
const handleCurrentChange = (val: number) => {
    queryForm.currentPage = val;
    submitForm()
}

// ---------- 添加/编辑/删除 ----------
const isEdit = ref(false)
const dialogVisible = ref(false)
const id = ref()

const handleAdd = () => {
    dialogVisible.value = true
    isEdit.value = false
}
const handleEdit = (row: pmsAttrGroupType) => {
    dialogVisible.value = true
    isEdit.value = true
    id.value = row.id
}
const handleDelete = async (row: pmsAttrGroupType) => {
    ElMessageBox.confirm(`确认删除角色【${row.name}】吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const data = await commonRemove(API.REMOVE, row.id as number)
        if (data.code === 200) {
            ElMessage.success('删除成功');
            // 如果删除的是最后一条数据需要回到上一页
            if (records.value.length === 1) {
                queryForm.currentPage -= 1
            }
            submitForm();
        } else {
            ElMessage.error('删除失败');
        }
    });
}
const onSuccess = () => {
    dialogVisible.value = false
    // 如果是新增 需要回到第一页
    if (!isEdit.value) {
        queryForm.currentPage = 1
        queryForm.name = ''
    }
    submitForm()
}
</script>

<style scoped lang="scss">
.pms_attr_group_table {
    :deep(.el-card__body) {
        display: flex;
    }

    .scroll_category_tree {
        height: calc(100vh - 150px);
    }
}

.attr_group_table {
    width: calc(100% - 200px);

    .attr_group_table_query_card {
        margin-bottom: 20px;
        min-width: 600px;

        .el-form {
            .el-input {
                width: 240px;
            }

            .el-form-item {
                margin-bottom: 0;
            }
        }
    }

    .attr_group_table_record_card {
        margin-bottom: 20px;
        min-width: 600px;
    }
}
</style>